import {
  BasicLayout,
  RouteView,
  PageView
} from '@/layouts'
import {
  getRouters
} from '@/api/menu'
import {
  constantRouterMap
} from '@/config/router.config'

// 基本路由地址
function generateIndexRouter(syncRouters) {
  return [{
      path: '/',
      name: 'index',
      component: BasicLayout,
      meta: {
        title: '首页'
      },
      redirect: '/home',
      children: [{
          path: 'home',
          name: 'home',
          component: () => import('@/views/dashboard/Analysis'),
          meta: {
            title: '主页',
            icon: 'home',
            keepAlive: true,
            permission: []
          }
        },
        // 个人中心
        {
          path: '/account',
          component: RouteView,
          hidden: true,
          redirect: '/account/settings',
          name: 'account',
          meta: { title: '个人页', icon: 'user', keepAlive: false, permission: [] },
          children: [
            {
              path: '/account/settings',
              name: 'settings',
              component: () => import('@/views/user/settings/Index'),
              meta: { title: '个人设置', hideHeader: true, permission: [] },
              redirect: '/account/settings/base',
              hideChildrenInMenu: true,
              children: [
                {
                  path: '/account/settings/base',
                  name: 'BaseSetting',
                  component: () => import('@/views/user/settings/Base'),
                  meta: { title: '基本设置', hidden: true, permission: [] }
                }
              ]
            }
          ]
        },
        // 动态路由数据
        ...getSyncMenu(syncRouters)
      ]
    },

    {
      path: '*',
      redirect: '/404',
      hidden: true
    }
  ]
}

// 通过后台数据渲染菜单路由
function getSyncMenu(syncRouters) {
  return syncRouters.filter(route => {
    let isParent = false
    if (route.component) {
      // Layout组件特殊处理
      if (route.component === 'RouteView') {
        route.component = RouteView
        isParent = true
      } else if (route.component === 'PageView') {
        route.component = PageView
        isParent = true
      } else {
        route.component = loadView(route.component)
      }
    } else {
      delete route.component
    }
    if (route.children != null && route.children.length > 0) {
      route.children = getSyncMenu(route.children)
    }
    if (isParent) {
      if (route.children === null) {
        route.children = []
      }
    }
    // 外部链接
    if (route.outsideChain) {
      route.meta.target = '_blank'
    } else {
      delete route.meta.target
    }
    return true
  })
}

// 加载路由组件
export const loadView = view => {
  // 路由懒加载
  return () => import(`@/views/${view}`)
}

const permission = {
  state: {
    routers: constantRouterMap,
    addRouters: []
  },
  mutations: {
    SET_ROUTERS: (state, routers) => {
      state.addRouters = routers
      state.routers = constantRouterMap.concat(routers)
    }
  },
  actions: {
    GenerateRoutes({
      commit
    }, data) {
      return new Promise(resolve => {
        getRouters().then(res => {
          if (res.code === 200) {
            const accessedRoutes = generateIndexRouter(res.data)
            commit('SET_ROUTERS', accessedRoutes)
            resolve()
          }
        })
      })
    }
  }
}

export default permission
